<template>
  <router-view />

  <van-tabbar
    v-model="active"
    :fixed="true"
    active-color="orange"
    :placeholder="true"
    :route="true"
    @change="fn"
  >
    <van-tabbar-item to="/home/index">
      首页
      <template #icon>
        <span>🍎</span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/home/classify">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="/home/cart">
      购物车
    </van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/home/mine">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const active = ref<number>(0);

    const fn = (active: number | string) => {
      console.log(active);
    };

    return { active, fn };
  },
});
</script>
